<template>
    <view class="bottom-menus">
        <view class="menu" v-for="(item,index) in memuList" :key="index" @click="selectMenu(item,index)">
            <image :src="'../../static/makeWorks/menu-'+index+'.png'" mode=""></image>
            <view class="">{{item.name}}</view>
        </view>
    </view>
</template>
<script>
export default {
    name: '',
    data() {
        return {
            memuList:[
                {
                    name:'更改主题',
                },
                {
                    name:'添加照片',
                },
                {
                    name:'更换照片',
                },
                {
                    name:'添加音乐',
                },
                {
                    name:'预览',
                },
            ]
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {
        selectMenu(item,index){
            this.$emit('selectMenu',index)
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.bottom-menus {
    position: relative;
    width: 100%;
    display: flex;
    .menu {
        width: 150rpx;
        height: 100rpx;
        background-color: rgba(0,0,0,0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 22rpx;
        line-height: 22rpx;
        image{
            width: 32rpx;
            height: 32rpx;
            margin-bottom: 12rpx;
        }
    }
}
</style>
